﻿@page "/components/element"

<DocsPage>
    <DocsPageHeader Title="MudElement" SubTitle="A primitive component that allows you to create your own components and render the html element you want in an interactive way." />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Basic example">
                <Description>MudElement accepts all attributes you want, plus an <CodeInline>HtmlTag</CodeInline> parameter that tells the component which html element to render, and <CodeInline>Class</CodeInline> and <CodeInline>Style</CodeInline> parameters for styling.</Description>
            </SectionHeader>
            <SectionContent Code="MudElementSimpleExample">
                <MudElementSimpleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Interactive example">
                <Description>Change the rendered html element in an interactive way:</Description>
            </SectionHeader>
            <SectionContent Code="MudElementChangingExample" ShowCode="false">
                <MudElementChangingExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Passing a ref">
                <Description>
                    You can pass an <CodeInline>ElementReference</CodeInline> to the root element that <CodeInline>MudElement</CodeInline> is going to render
                    <br />
                    Just make sure that you bind this reference to the 
                    <CodeInline>
                        Ref 
                    </CodeInline>
                    property of the <CodeInline>MudElement</CodeInline>.
                </Description>
            </SectionHeader>
            <SectionContent Code="MudElementRefExample" ShowCode="false">
                <MudElementRefExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>

    
